/**
 * @module  余额
 * @author xiongsha
 * @date 2021-01-05 19:42:37
 */

import React, { useState, useEffect } from 'react';
import HeaderComponent from '@src/pages/components/Header';
import { RouteComponentProps } from 'react-router';
import request from '@src/utils/request';
import ListViewWithPp from '@src/components/common/ListViewPp';
import './index.less';

interface IList {
  account?: string;
  admin_id?: number;
  amount?: string;
  created_at?: string;
  discount_id?: number;
  id?: number;
  no?: string;
  payment_id?: number;
  payment_log?: string;
  status?: number;
  type?: string;
  updated_at?: string;
  user_id?: number;
}

const Balance: React.FC<RouteComponentProps> = (props) => {
  const [list, setList] = useState<IList[]>([]);
  const [page, setPage] = useState<number>(1);
  const [total, setTotal] = useState<number>(1);

  const onPullDown = () => {
    // 下拉刷新
    setPage(1);
    return getList(1);
  };

  const onPullUp = () => {
    // 上拉加载
    setPage(page + 1);
    return getList(page + 1);
  };

  const getList = async (page) => {
    const res = await request('get', '/api/v1/account_logs', {
      page,
      pageSize: 10
    })
    if (res && res.code === 200) {
      const { data } = res.data;
      let listData: IList[] = list;
      if (page === 1) {
        listData = data;
      } else {
        listData = listData.concat(data);
      }
      setTotal(res.data.total);
      setList(listData);
    }
  };

  useEffect(() => {
    getList(1);
  }, []);
  return (
    <div className="balance">
      <HeaderComponent text="余额记录" />
      <ListViewWithPp
        data={list}
        styleHeight={undefined as any}
        hasMore={page * 10 < total}
        onPullDown={onPullDown}
        onPullUp={onPullUp}
        useBodyScroll={true}
        initialListSize={10}
        renderRow={(cur) => (
          <div className="balance-list" key={cur.id}>
            <div className="list-header">
              <span>{cur.created_at}</span>
              <span className="money">
                {cur.status === 1 ? '+' : '-'}
                {cur.amount}
              </span>
            </div>
            <p className="list-status">{cur.type}</p>
          </div>
        )}
      />
    </div>
  );
};
export default Balance;
